import React from 'react'
import { Button, Checkbox, Form, Input, Image } from 'antd';
import { getLogin } from '../../axios/use';
import styles from './css/index.module.css'
import useLoadach from '../../Hook/useLoadach';
import { useNavigate } from 'react-router-dom';
import { uslog } from '../../store/slice/ticket';
import { useDispatch } from 'react-redux'
const Index = () => {
    const fd = useLoadach()
    const Dispatch = useDispatch()
    const nav = useNavigate()
    const onFinish = async (values) => {
        console.log('Success:', values);
        const { account, password } = values
        const res = await getLogin({ account, password })
        console.log(res);
        localStorage.setItem('token', res.token)
        Dispatch(uslog(res))
        nav('/home')
    };

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className={styles.a}>
            <div className={styles.box}>
                <div>
                    <h2 style={{ display: 'flex', alignItems: 'center' }}><Image
                        width={50}
                        src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
                    />文章发布系统</h2>
                </div>
                <Form
                    name="basic"
                    // labelCol={{ span: 5 }}
                    // wrapperCol={{ span: 16 }}
                    // style={{ maxWidth: 600, marginLeft: '-50px', marginTop: '40px' }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="账号"
                        name="account"
                        rules={[{ required: true, message: '请输入账号!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="验证码"
                        name="code"
                        rules={[{ required: true, message: '请输入验证码!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label={null}>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                            <Button style={{ width: '200px' }} type="primary" htmlType="submit">
                                登录
                            </Button>
                            <Button style={{ width: '200px', marginTop: '20px' }}>
                                取消
                            </Button>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Index
